<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        html,
        body {
            height: 100%;
        }
        .top{
            width: 100%;
            height: 8%;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            background-color: #2980b9;
        }
        .register,.login{
            cursor: pointer;
        }
        .bottom{
            display: flex;
            height: 92%;
        }
        aside{
            width: 150px;  
            color: gainsboro;
            background-color: #2980b9;
        }
        p{
            height: 50px;
            padding: 0 20px;
            line-height: 50px;
        }
        aside .active{
            color: white;
            background-color: #1f618d;
        }
        main{
            padding: 40px;
        }
        .find{
            height: 70px;
            display: flex;
        }
        input{
            width: 300px;
            height: 50px;
            border-radius: 24px;
            padding: 0 20px;
            margin-right: 20px;
            border: 1px solid gainsboro;
        }
        .find button{
            width: 80px;
            height: 50px;
            border-radius: 10px;
            color: white;
            background-color: #5db85b;
        }
        .add{
            width: 150px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
            color: white;
            margin-bottom: 20px;
            background-color: #5db85b;
        }
        table{
            width: 900px;
            text-align: center;
            border-spacing: 0;
        }
        table .active{
            text-align: left;
        }
        tr{
            height: 40px;
        }
        th{
            border-bottom: 1px solid gainsboro;
        }
        td{
            border-top: 1px solid gainsboro;
        }
        tfoot button{
            width: 80px;
            height: 30px;
            border-radius: 5px;
            margin-right: 20px;
            border: 1px solid gainsboro;
        }
        tfoot button:first-child{
            margin-left: 400px;
        }
        tfoot button:last-child{
            margin-left: 20px;
        }
        .status{
            display: inline-block;
            width: 50px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            color: white;
            background-color: #5bb75f;
        }
        .error{
            display: inline-block;
            width: 50px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            color: white;
            background-color: red;
        }
        .error-null{
            color: red;
        }
        .icon-bianji{
            margin-right: 14px;
        }
    </style>
</head>

<body>
    <div class="top">
        <span>9466云专题</span>
        <span class="iconfont icon-yonghu"> <span class="username">龙猫</span>（9466云专题）<span class="register">注册 </span><span class="login">登陆</span></span>
    </div>
    <div class="bottom">
        <aside>
            <p class="iconfont icon-home"> 首页</p>
            <p class="iconfont icon-zhuantiguanli"> 专题</p>
            <p class="iconfont icon-yonhu active"> 用户</p>
            <p class="iconfont icon-shezhi"> 设置</p>
            <p class="iconfont icon-xitongrizhi"> 日志</p>
        </aside>
        <main>
            <div class="find">
                <input type="text" placeholder="搜索用户">
                <button>搜索</button>
            </div>
            <div class="add">
                <span class="iconfont icon-tianjia"></span> 
                添加用户
            </div>
            <table>
                <thead>
                    <tr>
                        <th class="active">邮箱（账户）</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>所属组</th>
                        <th>管理员</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td class="active">123</td>
                        <td>123</td>
                        <td>123</td>
                        <td>123</td>
                        <td>123</td>
                        <td>
                            <span class="status">正常</span>
                        </td>
                        <td>
                            <span class="iconfont icon-bianji"></span>
                            <span class="iconfont icon-shanchu"></span>
                        </td>
                    </tr> -->
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="7">
                            <button class="prev">上一页</button>
                            <span class="page"></span>
                            <button class="next"> 下一页</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </main>
    </div>
</body>

</html>
<script src="./axios.min.js"></script>
<script src="./js/index.js"></script>

